<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台登录</title>

    <link rel="stylesheet" href="/static/css/rotate-captcha.css">
    <script src="/static/js/captcha.js"></script>

    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #339fec;
        }

        .rotate-captcha-btn {
            height: 30px;
            line-height: 30px;
            border: 1px solid #dcdfe6;
            background-color: #dcdfe6;
            width: 380px;
            margin: 0 auto;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            opacity: 0.8;
            background-image: linear-gradient(180deg, #fff, #f3f3f3);
        }
    </style>
</head>

<body>
    <div style="position: absolute;left: 50%;top: 50%;width: 500px;margin-left: -250px;margin-top: -200px;">
        <div style="background-color: white;padding: 20px;border-radius: 4px;box-shadow: 5px 5px 20px #444444;">
            <div id="login-form" class="layui-form">
                <!-- 标题 -->
                <div class="layui-form-item" style="text-align: center;color: gray;">
                    <h1>后台管理系统</h1>
                </div>
                <hr style="margin-bottom: 20px;">
                <!-- 用户名 -->
                <div class="layui-form-item">
                    <div class="layui-form-label">用户名</div>
                    <div class="layui-input-block">
                        <input class="layui-input" type="text" id="username" name="username" required
                            lay-verify="username" placeholder="请输入用户名">
                    </div>
                </div>
                <!-- 密码 -->
                <div class="layui-form-item">
                    <div class="layui-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</div>
                    <div class="layui-input-block">
                        <input class="layui-input" type="password" id="password" name="password" required
                            lay-verify="password" placeholder="请输入密码">
                    </div>
                </div>
                <!-- 验证码 -->
                <div class="layui-form-item">
                    <div class="layui-form-label">验证码</div>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" id="verifycode" name="verifycode" required
                            lay-verify="required">
                    </div>
                    <!-- 验证码图片 -->
                    <img src="{:captcha_src()}" id="captcha" onClick="refshCaptcha()">
                </div>

                <!-- 旋转验证码按钮 -->
                <div id="rotate-captcha-btn-div" class="layui-form-item">
                    <div class="rotate-captcha-btn" onclick="showCaptcha()">
                        <span>点击按钮进行验证</span>
                    </div>
                </div>

                <!-- 旋转验证码容器 -->
                <!-- <div id="rotate-captcha" class="J__captcha__"
                    style="display: none;position: absolute;z-index: 999;top:50%;left:50%;transform:translate(-50%,-50%);">
                </div> -->
                <div id="rotate-captcha" class="J__captcha__" style="display: none;z-index: 999;">
                </div>

                <!-- 登录按钮 -->
                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left: 0;text-align: center;">
                        <button class="layui-btn" lay-submit lay-filter="formSubmit">登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/layui/layui.js"></script>
    <script src="/static/layer/layer.js"></script>
    <script>
        var layer;
        var $;
        layui.use(['layer', 'form'], function () {
            layer = layui.layer;
            $ = layui.jquery;
            form = layui.form;

            // 获取焦点
            $('#username').focus();

            // 回车登录
            $('input').keydown(e => {
                if (e.keyCode == 13) {
                    doLogin();
                }
            });

            // 表单验证
            form.verify({
                // 用户名
                username: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                    if (/^\.{5,15}$/.test(value)) {
                        return '用户名长度5-15位';
                    }
                },

                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                // 密码
                password: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格']
            });

            // 监听登录提交
            form.on('submit(formSubmit)', function (data) {
                $.post('/admin/login', data.field, function (res) {
                    if (res.code == 200) {
                        layer.msg('登录成功', {
                            icon: 6,
                            time: 500
                        }, function () {
                            window.location.href = '/admin/home';
                        });
                    } else {
                        layer.msg(res.msg, { icon: 2 });
                        refshCaptcha();
                    }
                }, 'json');

                return false;
            });

        });

        // 刷新图片验证码
        function refshCaptcha() {
            $('#captcha').attr('src', '{:captcha_src()}?rand=' + Math.random());
        }


        // 显示旋转验证码
        function showCaptcha() {
            // 弹出层显示旋转验证码
            layer.open({
                type: 1,
                // offset: 'auto',
                offset: ['21%', '40%'],
                title: '旋转图片进行验证',
                content: $('#rotate-captcha'),
                success: function (layero, index) {
                    // console.log(index);

                    // 图片旋转验证码
                    let myCaptcha = document.querySelectorAll('.J__captcha__').item(0).captcha({
                        theme: '#07f', // 验证码主色调
                        title: '安全验证',
                        desc: '拖动滑块，使图片角度为正',
                        width: 305, // 验证界面的宽度
                        successClose: 1000, // 验证成功后页面关闭时间
                        timerProgressBar: !0, // 验证成功后关闭时是否显示进度条
                        timerProgressBarColor: '#07f', // 进度条颜色
                        url: {
                            create: '/admin/mycaptcha/rotate', // 获取验证码信息
                            check: '/admin/mycaptcha/verify', // 验证
                            img: '/admin/mycaptcha/img', // 交换旋转图
                        },
                        init: function (captcha) { }, // 初始化
                        success: function () { // 验证成功
                            // 隐藏元素
                            $('#rotate-captcha-btn-div').css('display', 'none').attr("disabled", true);
                            // 关闭layer
                            layer.closeAll();
                        },
                        fail: function () { }, // 验证失败
                        // complete: function (state) { }, // 触发验证, 不管成功与否
                        close: function (state) { },  // 关闭验证码窗口并返回验证状态state
                    });

                }
            });
        }

    </script>
</body>

</html>